<script setup lang="ts"></script>

<template>
  <div class="groupbox">
    <div class="gb bg1" style="grid-area: bg1">bg1</div>
    <div class="gb bg2" style="grid-area: bg2">bg2</div>
    <div class="gb bg3" style="grid-area: bg3">bg3</div>
    <div class="gb bg4" style="grid-area: bg4">bg4</div>
    <div class="gb bg5" style="grid-area: bg5">gb5</div>
    <div class="gb bg6" style="grid-area: bg6">gb6</div>
    <div class="gb bg7" style="grid-area: bg7">gb7</div>
    <!-- <div class="gb bg8" style="grid-area: bg8">gb8</div>
    <div class="gb bg9" style="grid-area: bg9">gb9</div>
    <div class="gb bg10" style="grid-area: bg10">gb10</div>
    <div class="gb bg11" style="grid-area: bg11">gb11</div>
    <div class="gb bg12" style="grid-area: bg12">gb12</div>
    <div class="gb bg13" style="grid-area: bg13">gb13</div>
    <div class="gb bg14" style="grid-area: bg14">gb14</div>
    <div class="gb bg15" style="grid-area: bg15">gb15</div> -->
  </div>
</template>

<style lang="scss" scoped>
.groupbox {
  display: grid;
  // grid-template-columns: repeat(5, 200px);
  // grid-template-columns: repeat(auto-fil, minmax(200px, 1fr));
  grid-template-columns: auto-fit;
  grid-template-rows: repeat(3, 200px);
  gap: 10px;
  grid-template-areas:
    'bg1 bg1 bg2 bg3 bg3'
    'bg1 bg1 bg4 bg5 bg5'
    'bg6 bg7 bg7 bg5 bg5';
}
.gb {
  background-color: orange;
}

@media screen and (max-width: 768px) {
  .groupbox {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(7, 100px);
    grid-template-areas:
      'bg1'
      'bg2'
      'bg3'
      'bg4'
      'bg5'
      'bg6'
      'bg7';
  }
}
</style>
